<template>
    <div class="profile-box">
        <div class="bx">
            <el-button>详情</el-button>
            <el-button>编辑</el-button>
        </div>
        <vxe-table border :sort-config="sortConfig" :data="tableData" @sort-change="sortChangeEvent"
            :row-config="{ isCurrent: true, isHover: true }">
            <vxe-column type="seq"></vxe-column>
            <vxe-column field="dep" title="部门" sortable></vxe-column>
            <vxe-column field="name" title="姓名" sortable></vxe-column>
            <vxe-column field="sex" title="性别"></vxe-column>
            <vxe-column field="job" title="职位"></vxe-column>
            <vxe-column field="status" title="状态" sortable></vxe-column>
            <vxe-column field="rdate" title="入职日期" sortable></vxe-column>
            <vxe-column field="zdate" title="专正日期" sortable></vxe-column>
            <vxe-column field="phone" title="电话"></vxe-column>
            <vxe-column field="tel" title="手机号"></vxe-column>
            <vxe-column field="ID" title="ID"></vxe-column>
        </vxe-table>
        <p>个人资料请认真填写！</p>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VxeTablePropTypes, VxeTableEvents } from 'vxe-table'

interface RowVO {
    dep: string
    name: string
    sex: string
    job: string
    status: string
    rdate: string
    zdate: string
    phone: string
    tel: string
    ID: number
}

const sortConfig = ref<VxeTablePropTypes.SortConfig<RowVO>>({
    multiple: true
})

const tableData = ref<RowVO[]>([
    {
        dep: '开发部', name: '小红', sex: '女', job: '项目主管', status: '正式', rdate: new Date('2016-06-23').toLocaleDateString().replaceAll('/', '-'),
        phone: '', tel: '15833678367', ID: 1, zdate: new Date('2016-09-23').toLocaleDateString().replaceAll('/', '-')
    },
    { dep: '人力部', name: '小王', sex: '男', job: '产品经理', status: '实习', rdate: new Date('2016-05-23').toLocaleDateString().replaceAll('/', '-'), phone: '', tel: '15833808367', ID: 2, zdate: new Date('2016-08-23').toLocaleDateString().replaceAll('/', '-') },

])

const sortChangeEvent: VxeTableEvents.SortChange<RowVO> = ({ sortList }) => {
    console.info(sortList.map((item) => `${item.field},${item.order}`).join('; '))
}
</script>

<style  scoped>
.profile-box {
    height: 100vh;
    width: 100vm;
    background: #fff;
    padding-top: 20px;
}

.vxe-body--row {
    height: 100px !important;
}

.bx {
    display: flex;
    justify-content: end;
    margin-right: 20px;
    margin-bottom: 10px;
}

p {
    margin-top: 10px;
}
</style>